<template>
    <div
        :class="classList"
        @click.stop="clickItem(data)"
        @mouseover.stop="hoverActive = data"
        @drop.stop="drop"
        @dragover.stop="dragover"
    >
        <div v-if="current === data">
            <div class="ml-tool">
                <snippets-outlined
                    @click="$emit('copy', { node: data, list })"
                />
                <delete-outlined
                    @click="$emit('deleteItem', { node: data, list })"
                />
            </div>
        </div>

        <component
            :key="data._id"
            :is="data.tag"
            v-bind="{
                ...dataAttrs,
            }"
        >
            <template v-for="slot in data.slot" :key="slot._id" #[slot.name]>
                <ml-render
                    v-for="child in slot.children"
                    :key="child._id"
                    :item="child"
                    :golbal="golbal"
                    :list="slot.children"
                    @copy="$emit('copy', $event)"
                    @deleteItem="$emit('deleteItem', $event)"
                />
            </template>

            <template v-if="Array.isArray(data.children)">
                <ml-render
                    v-for="child in data.children"
                    :key="child._id"
                    :item="child"
                    :golbal="golbal"
                    :list="data.children"
                    @copy="$emit('copy', $event)"
                    @deleteItem="$emit('deleteItem', $event)"
                />
            </template>
            <template v-else>
                {{ item.label }}
            </template>
        </component>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, PropType, onMounted, inject } from "vue";
import {
    DeleteOutlined,
    ScissorOutlined,
    SnippetsOutlined,
} from "@ant-design/icons-vue";
import { handleMethodsV1 } from "../hook/comon";
import commonHook from "../hook/main";

export default defineComponent({
    name: "ml-render",
    components: {
        DeleteOutlined,
        ScissorOutlined,
        SnippetsOutlined,
    },
    props: {
        item: Object,
        golbal: Object as PropType<any>,
        list: Array,
    },
    setup(props) {
        const data = ref<any>(handleMethodsV1(props.item, props));

        const itemHook = commonHook(props, data);

        const _ref = {
            [data.value.ref]: ref(),
        };

        const { hoverActive } = itemHook;
        const handleDrop = inject<Function>("handleDrop");

        const drop = (e: Event) => {
            handleDrop && handleDrop(hoverActive.value);
        };

        const dragover = (e: Event) => {
            e.preventDefault();
            hoverActive.value = data.value;
        };

        let dataAttrs = ref();
        if (props.item) {
            dataAttrs.value = props.item.attributes;
            if (["a-modal", "a-drawer"].includes(props.item.tag)) {
                dataAttrs.value["getContainer"] = "#LayoutContent";
                dataAttrs.value["style"] = {
                    position: "absolute",
                    top: 0,
                    right: 0,
                };
            }
        }

        let obj: any = {
            data,
            dataAttrs,
            ...itemHook,
            ..._ref,
            drop,
            dragover,
        };

        onMounted(() => {
            if (obj[data.value.ref].value) {
                props.golbal[`$${data.value.ref}`] = obj[data.value.ref].value;
            }
        });

        return obj;
    },
});
</script>
